<template>
  <!-- 直播报名 -->
  <div class="streamingdetail" id="streamingdetail">
    <div class="streamingdetail_cont">
      <div class="streamingdetail_cont_main" v-show="this.$route.query.Hftype == 1">
        <div class="streamingdetail_cont_main_left">
          <img :src="this.coursedetail.CoverPicturePath" alt />
          <div class="streamingdetail_cont_main_left_cover">
            <div class="streamingdetail_cont_main_left_cover_ifno">
              <p>下节直播：{{this.coursedetail.CourseName}}</p>
              <p>
                {{this.coursedetail.StartDate}}
                <a @click="baoming()">预约直播</a>
              </p>
            </div>
          </div>
        </div>
        <div class="streamingdetail_cont_main_right">
          <p class="streamingdetail_cont_main_right_tit">
            <a :title="this.coursedetail.CourseName">{{this.coursedetail.CourseName}}</a>
            <span>({{this.coursedetail.ClassName}})</span>
          </p>
          <p class="streamingdetail_cont_main_right_paycount">
            已报名 {{this.coursedetail.NumberAppPer}}人 （每班人数{{this.coursedetail.PerUpperlimit}}人）
            <i></i>
            <span
              v-for="(item,index) in (this.coursedetail.Label || '').split(',')"
              :key="index"
            >{{item}}</span>
          </p>
          <div class="streamingdetail_cont_main_right_date">
            <h2 class="hidden-clip">{{this.coursedetail.CourseName}}</h2>
            <p>上课时间：{{this.coursedetail.StartDate}} 至 {{this.coursedetail.EndDate}}</p>
          </div>
          <div class="streamingdetail_cont_main_right_price">
            <div class="streamingdetail_cont_main_right_price_top">
              <span>限时抢购</span>
            </div>
            <div class="streamingdetail_cont_main_right_price_bottom">
              <ul>
                <li>
                  <span
                    v-if="this.coursedetail.DisCount < 1"
                  >￥{{((this.coursedetail.Price) * this.coursedetail.DisCount).toFixed(2)}}</span>
                  <span
                    style="text-decoration:line-through"
                    v-if="this.coursedetail.DisCount < 1"
                  >￥{{this.coursedetail.Price}}</span>
                  <span v-if="this.coursedetail.DisCount >= 1">￥{{this.coursedetail.Price}}</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="streamingdetail_cont_main_right_subpay">
            <span @click="baoming()">立即报名</span>
          </div>
          <div class="streamingdetail_cont_main_right_zixu" @click="dialogtter()">报名须知</div>
          <div class="streamingdetail_cont_main_right_zixuB" @click="tomunotesappli()">听课须知</div>
        </div>
        <div style="clear:both;"></div>
      </div>

      <!-- 普通大课 -->
      <div class="streamingdetail_contB" v-show="this.$route.query.Hftype == 2">
        <div class="streamingdetail_cont_main">
          <div class="streamingdetail_cont_main_video">
            <div class="streamingdetail_cont_main_video_video">
              <video src ref="video" controls id="streamingdetail_cont_main_video_video"></video>
              <div class="streamingdetail_cont_main_video_video_cover">
                <div class="streamingdetail_cont_main_video_video_cover_img"></div>
                <div class="streamingdetail_cont_main_video_video_cover_cover"></div>
                <div class="streamingdetail_cont_main_video_video_cover_btn" @click="playervideo()">
                  <i class="iconfont icon-bofang1"></i>
                </div>
              </div>
            </div>
            <div class="streamingdetail_cont_main_video_menu">
              <ul class="streamingdetail_cont_main_video_menu_one">
                <li
                  v-for="(item,index) in courmunulist"
                  :key="index"
                  @click="playback(item.OneToOne,item.OpenId,item.Title,index)"
                  :class="{courmunuactive:courmunuactive == item.OpenId}"
                >
                  <p>
                    <span class="streamingdetail_cont_main_video_menu_left">回放</span>
                    <span v-html="item.Title"></span>
                  </p>
                </li>
              </ul>
              <ul class="streamingdetail_cont_main_video_menu_two" v-show="isShowovo">
                <li
                  v-for="(item,index) in courmunulistovo"
                  :key="index"
                  @click="playovoback(item,index)"
                  :class="{courmunuovoactive:courmunuovoactive == index}"
                >
                  <p>
                    <span class="streamingdetail_cont_main_video_menu_left">回放</span>
                    <span v-html="item.Title"></span>
                  </p>
                </li>
              </ul>
            </div>
            <div style="clear:both;"></div>
          </div>
        </div>
      </div>

      <!-- 1v1 -->
      <div class="streamingdetail_contB" v-show="this.$route.query.Hftype == 3">
        <div class="streamingdetail_cont_main">
          <div class="streamingdetail_cont_main_video">
            <div class="streamingdetail_cont_main_video_video">
              <video src ref="videoB" controls id="streamingdetail_cont_main_video_video"></video>
              <div class="streamingdetail_cont_main_video_video_cover">
                <div class="streamingdetail_cont_main_video_video_cover_img"></div>
                <div class="streamingdetail_cont_main_video_video_cover_cover"></div>
                <div class="streamingdetail_cont_main_video_video_cover_btn" @click="playervideo()">
                  <i class="iconfont icon-bofang1"></i>
                </div>
              </div>
            </div>
            <div class="streamingdetail_cont_main_video_menu">
              <ul class="streamingdetail_cont_main_video_menu_one">
                <li
                  v-for="(item,index) in courmunulist"
                  :key="index"
                  @click="playback(item.OneToOne,item.OpenId,item.Title,index)"
                  :class="{courmunuactive:courmunuactive == item.OpenId}"
                >
                  <p>
                    <span class="streamingdetail_cont_main_video_menu_left">回放</span>
                    <span v-html="item.Title"></span>
                  </p>
                </li>
              </ul>
              <ul class="streamingdetail_cont_main_video_menu_two" v-show="isShowovo">
                <li
                  v-for="(item,index) in courmunulistovo"
                  :key="index"
                  @click="playovoback(item,index)"
                  :class="{courmunuovoactive:courmunuovoactive == index}"
                >
                  <p>
                    <span class="streamingdetail_cont_main_video_menu_left">回放</span>
                    <span v-html="item.Title"></span>
                  </p>
                </li>
              </ul>
            </div>
            <div style="clear:both;"></div>
          </div>
        </div>
      </div>

      <div class="streamingdetail_cont_body">
        <div class="streamingdetail_cont_body_main">
          <div class="streamingdetail_cont_body_left">
            <div class="streamingdetail_cont_body_left_tab">
              <ul>
                <li :class="{stretab:stretab === 0}" @click="stretab = 0">
                  <a>课程概述</a>
                </li>
                <li :class="{stretab:stretab === 1}" @click="stretab = 1">
                  <a @click="getCoursemenu()">目录</a>
                </li>
                <div style="clear:both;"></div>
              </ul>
            </div>
            <div class="streamingdetail_cont_body_left_tab_cont" v-show="stretab == 0">
              <p class="streamingdetail_cont_body_left_tab_cont_tet">专家介绍</p>
              <div class="moexpert">
                <ul>
                  <li v-for="(item,index) in coursedescribecont" :key="index">
                    <div class="moexpert_exrtpimg">
                      <img :src="item.HeadPicPath" alt />
                    </div>
                    <p>
                      <a :title="item.Name">{{item.Name}}</a>
                    </p>
                    <p v-html="item.Introduce">
                      <a :title="item.Introduce"></a>
                    </p>
                  </li>
                  <div style="clear:both;"></div>
                </ul>
              </div>
              <div class="streamingdetail_cont_body_left_tab_cont_info">
                <p>课程简介</p>
                <p v-html="coursedescribetit"></p>
              </div>
            </div>
            <div class="streamingdetail_cont_body_left_tab_contB" v-show="stretab == 1">
              <ul>
                <li v-for="(item,index) in muldescribecont" :key="index">
                  <div class="streamingdetail_cont_body_left_tab_contB_top">
                    <span></span>
                    <span>{{item.Title}}</span>
                  </div>
                  <div class="streamingdetail_cont_body_left_tab_contB_bottom">
                    <i class="iconfont icon-zhibo"></i>
                    <p>
                      <span title="【直播】新盟教育-开班典礼">{{item.Title}}</span>
                      <span>({{item.StartDate}}-{{item.EndDate}})</span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div style="clear:both;"></div>
        </div>
      </div>
    </div>

    <el-dialog
      title="完善个人信息"
      :visible.sync="dialogFormVisible"
      class="dialogttercoubaoming"
      :close-on-click-modal="false"
    >
      <p style="margin-bottom:21px;color:#003c80;font-size:17px;">* 完善个人信息后，方可报名该课程</p>
      <el-form size="small" ref="orgDialogForm" :model="form" :rules="rules">
        <el-row>
          <el-col :span="12" style="margin-left:10px;">
            <el-form-item label="姓名：" prop="RealName">
              <el-input v-model="form.RealName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-left:8px;">
            <el-form-item label="性别：" prop="Gender">
              <el-radio v-model="form.Gender" :label="1">男</el-radio>
              <el-radio v-model="form.Gender" :label="2">女</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-left:-21px;">
            <el-form-item label="出生日期：" prop="Birthday">
              <el-date-picker
                v-model="form.Birthday"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-d"
                :default-value="timeDefaultShow"
                value-format="yyyy-MM-dd H:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-left:9px;">
            <el-form-item label="学历：" prop="Education">
              <el-select size v-model="form.Education" placeholder="请选择" clearable>
                <el-option
                  v-for="item in optionsedu"
                  :key="item.ValueID"
                  :label="item.ValueText"
                  :value="item.ValueID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-left:9px;">
            <el-form-item label="职称：" prop="JobTitle">
              <el-select size v-model="form.JobTitle" placeholder="请选择" clearable>
                <el-option
                  v-for="item in optionsejob"
                  :key="item.ValueID"
                  :label="item.ValueText"
                  :value="item.ValueID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-left:8px;">
            <el-form-item label="科室：" prop="SectionOffice">
              <el-input v-model="form.SectionOffice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-left:-20px;">
            <el-form-item label="工作单位：" prop="WorkUnit">
              <el-input v-model="form.WorkUnit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-left:-20px;">
            <el-form-item label="联系地址：" prop="Address">
              <el-input v-model="form.Address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="this.Ismobile">
          <el-col :span="12" style="margin-left:-5px;">
            <el-form-item label="手机号：" prop="cell">
              <el-input v-model="form.cell" style="width: 80%;float:left" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!this.Ismobile">
          <el-col :span="12" style="margin-left:-5px;">
            <el-form-item label="手机号：" prop="cell">
              <el-input v-model="form.cell" style="width: 32%;float:left"></el-input>
              <div class="regisCon_div">
                <el-form-item prop="code">
                  <el-input placeholder="验证码" size="small" v-model="form.code"></el-input>
                </el-form-item>
                <el-button
                  class="regis_hq"
                  :disabled="perdisabled"
                  size="small"
                  @click="getCode"
                  :class="{'closeClick':time!='获取验证码'}"
                >
                  {{time}}
                  <span v-show="time!='获取验证码'">秒后重新获取</span>
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo('orgDialogForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="报名须知" :visible.sync="dialogttercou" class="dialogttercou">
      <p>
        1.填写报名信息时，请上传一篇原创文章（或初稿），如文章通过专家预审，学员可参加一对一
        <span>（个案分析）课程</span>，如文章未通过专家预审，报名费全额退款。
      </p>
      <p>2.学员报名成功后，如遇特殊情况申请退款的，须至少于开课前48小时提交申请，申请提交后48小时内全额退款。</p>
      <p>3.开课前24小时至课程正式开始期间，如遇特殊情况申请退款的，平台将扣除20%报名费。</p>
      <p
        v-if="this.Isgtter == true"
      >4.课程结束后，作者须严格按专家指导意见修改文章，如果自课程结束6个月，文章未能成功发表，学员可申请退款，申请提交后48小时内全额退款。</p>
      <p v-if="this.Isgtter == false">4.如有其他问题请咨询客服， 客服电话：400-921-9838</p>
      <p v-if="this.Isgtter == true">5.如有其他问题请咨询客服， 客服电话：400-921-9838</p>
      <div>
        <img src="../../../../static/sc/ewm/wxkf.png" alt />
      </div>
      <p style="text-align:center;margin-left:0%">微信客服</p>
    </el-dialog>
  </div>
</template>

<script>
//juqery
import moment from "moment";
import util from "../../../assets/script/util";
export default {
  data() {
    const VALIDATE_MOBILE_NO = (rule, value, callback) => {
      if (util.isNotEmpty(value) && !validate.validateMobile(value)) {
        callback(new Error("手机号需为11位数字"));
      } else {
        callback();
      }
    };
    return {
      // 获取验证码
      perdisabled: false,
      form: {
        rules: "",
        // 姓名
        RealName: "",
        // 工作单位
        WorkUnit: "",
        // 出生日期
        Birthday: new Date("1990-10-23"),
        // 性别
        Gender: "",
        // 联系地址
        Address: "",
        // 专业
        Professional: "",
        // 部门
        SectionOffice: "",
        // 学历
        Education: "",
        // 职称
        JobTitle: "",
        // 职务
        Job: "",
        cell: "",
        code: ""
      },
      // 是否展示1v1列表
      isShowovo: false,
      // 手机号输入框是否禁用
      isdisabledFn: false,
      timeDefaultShow: new Date("1990-10-23"),
      optionsedu: [],
      optionsejob: [],
      rules: {
        RealName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        Birthday: [
          { required: true, message: "请输入出生日期", trigger: "blur" }
        ],
        Gender: [{ required: true, message: "请勾选性别", trigger: "blur" }],
        Education: [
          { required: true, message: "请选择学历", trigger: "change" }
        ],
        JobTitle: [
          { required: true, message: "请选择职称", trigger: "change" }
        ],
        SectionOffice: [
          { required: true, message: "请填写科室", trigger: "blur" }
        ],
        WorkUnit: [{ required: true, message: "工作单位", trigger: "blur" }],
        Address: [{ required: true, message: "联系地址", trigger: "blur" }],
        cell: [{ required: true, message: "请填写手机号", trigger: "blur" }]
      },

      courmunuactive: "",
      courmunuovoactive: "",

      courmunulistdetail: [],
      courmunulist: [],
      // 一对一列表
      courmunulistovo: [],
      formRules: {
        cell: [{ validator: VALIDATE_MOBILE_NO, trigger: "blur" }]
      },
      show: false,
      stretab: 0,
      classes: "",
      coursedetail: {},
      coursedescribe: [],
      // 内容简介
      coursedescribetit: "",
      // 课程概括
      coursedescribecont: [],
      // 课程目录
      muldescribecont: [],
      zheprice: "",

      // 付费页面班级id传参
      classId: "",
      // 付费页面课程id传参
      courseId: "",
      // 折扣
      disCount: "",

      // 弹框
      dialogFormVisible: false,

      time: "获取验证码",
      mobileB: "",

      dialogttercou: false,

      state: false,

      // 视频播放第一个id
      huifmenuopenId: "",
      // 视频播放第一个name
      huifmenuoname: "",
      // title赋值
      huifmenuTitle: "",

      Ismobile: localStorage.getItem("Mobile"),

      isIsApply: "",

      // 判断是否显示报名须知全部内容
      Isgtter: "",

      BirthdayB: ""
    };
  },
  // 获取当前日期转换为年月日格式
  filters: {
    formatDate(value) {
      return moment(value).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  methods: {
    // 提交完善信息dialog信息页面
    submitInfo(formName) {
      let localmoile = localStorage.getItem("Mobile");
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (localmoile) {
            this.BirthdayB = moment(this.form.Birthday).format(
              "YYYY/M/D H:mm:ss"
            );
            this.$httphelper
              .post("/api/LmUserApi/UpdateUserMessage", {
                OpenId: localStorage.getItem("AuthorId"),
                WorkUnit: this.form.WorkUnit,
                Birthday: this.BirthdayB,
                Gender: this.form.Gender,
                Address: this.form.Address,
                RealName: this.form.RealName,
                Professional: "",
                Education: this.form.Education,
                JobTitle: this.form.JobTitle,
                SectionOffice: this.form.SectionOffice,
                Job: "",
                Mentor: "",
                ZipCode: "",
                Mobile: this.form.cell
              })
              .then(res => {
                if (res.data.data == true) {
                  localStorage.setItem("Mobile", this.form.cell);
                  this.dialogFormVisible = false;
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.$router.push({
                    path: "/streaming/streamingpay",
                    query: {
                      classId: this.classId,
                      courseId: this.courseId,
                      type: this.$route.query.type,
                      Hftype: this.$route.query.Hftype
                    }
                  });
                } else {
                  this.$message({
                    message: "提交失败",
                    type: "warning"
                  });
                }
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            if (this.form.code) {
              this.$httphelper
                .post("/api/SmsEmailCodeApi/SmsEmailCodeOk", {
                  Mobile: this.form.cell,
                  VcStr: this.form.code
                })
                .then(res => {
                  if (res.data.data == false) {
                    this.$message({
                      message: "请输入正确的验证码",
                      type: "warning"
                    });
                  } else {
                    this.BirthdayB = moment(this.form.Birthday).format(
                      "YYYY/M/D H:mm:ss"
                    );
                    this.$httphelper
                      .post("/api/LmUserApi/UpdateUserMessage", {
                        OpenId: localStorage.getItem("AuthorId"),
                        WorkUnit: this.form.WorkUnit,
                        Birthday: this.BirthdayB,
                        Gender: this.form.Gender,
                        Address: this.form.Address,
                        RealName: this.form.RealName,
                        Professional: "",
                        Education: this.form.Education,
                        JobTitle: this.form.JobTitle,
                        SectionOffice: this.form.SectionOffice,
                        Job: "",
                        Mentor: "",
                        ZipCode: "",
                        Mobile: this.form.cell
                      })
                      .then(res => {
                        if (res.data.data == true) {
                          localStorage.setItem("Mobile", this.form.cell);
                          this.dialogFormVisible = false;
                          this.$message({
                            message: "提交成功",
                            type: "success"
                          });
                          this.$router.push({
                            path: "/streaming/streamingpay",
                            query: {
                              classId: this.classId,
                              courseId: this.courseId,
                              type: this.$route.query.type,
                              Hftype: this.$route.query.Hftype
                            }
                          });
                        } else {
                          this.$message({
                            message: "提交失败",
                            type: "warning"
                          });
                        }
                      })
                      .catch(err => {
                        console.log(err);
                      });
                  }
                })
                .catch(err => {
                  console.log(err);
                });
            } else {
              this.$message({
                message: "请填写验证码",
                type: "warning"
              });
            }
          }
        } else {
          this.$message({
            message: "请完善信息",
            type: "warning"
          });
        }
      });
    },

    // 点击普通回放标题赋值视频链接
    playback(OneToOne, OpenId, name, index) {
      this.$router.push({
        path: "/streaming/streamingdetail",
        query: {
          OpCourseId: "96B511D03E2CA8B1",
          Hftype: 2,
          type: 2,
          OpenId: OpenId
        }
      });
      this.courmunuactive = OpenId;
      // 加密完成
      if (OneToOne == false) {
        this.isShowovo = false;
        this.courmunuovoactive = "";
        this.$httphelper
          .post("/api/LmCourseApi/GetLiveBackPagePart", {
            Sign: "string",
            OpCataId: OpenId,
            OpAuthorId: localStorage.getItem("AuthorId")
          })
          .then(res => {
            this.huifmenuTitle = name;
            this.$refs.video.src = res.data.data.PlayBackPath;
            // 判断此视频是否有回放
            if (
              res.data.data.IsPlayBack == false ||
              res.data.data.PlayBackPath == ""
            ) {
              this.$message({
                message: "此视频暂无回放",
                type: "warning"
              });
              $("#streamingdetail_cont_main_video_video")
                .get(0)
                .pause();
              $(".streamingdetail_cont_main_video_video_cover").css(
                "display",
                "block"
              );
              $(".streamingdetail_cont_main_video_video_cover_btn").css(
                "display",
                "none"
              );
              $(".streamingdetail_cont_main_video_video_cover_cover").css(
                "display",
                "none"
              );
            } else {
              $(".streamingdetail_cont_main_video_video_cover").css(
                "display",
                "none"
              );
              $("#streamingdetail_cont_main_video_video")
                .get(0)
                .play();
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        $("#streamingdetail_cont_main_video_video")
          .get(0)
          .pause();
        $(".streamingdetail_cont_main_video_video_cover").css(
          "display",
          "block"
        );
        $(".streamingdetail_cont_main_video_video_cover_btn").css(
          "display",
          "block"
        );
        $(".streamingdetail_cont_main_video_video_cover_cover").css(
          "display",
          "block"
        );
        if (this.isIsApply == true) {
          // 加密完成
          this.$httphelper
            .post("/api/LmCourseApi/GetLiveBackPagePart", {
              Sign: "string",
              OpCataId: OpenId,
              OpAuthorId: localStorage.getItem("AuthorId")
            })
            .then(res => {
              this.huifmenuTitle = name;
              this.$refs.video.src = res.data.data.PlayBackPath;
              // 判断此视频是否有回放
              if (
                res.data.data.IsPlayBack == false ||
                res.data.data.PlayBackPath == ""
              ) {
                this.$message({
                  message: "此视频暂无回放",
                  type: "warning"
                });
                $("#streamingdetail_cont_main_video_video")
                  .get(0)
                  .pause();
                $(".streamingdetail_cont_main_video_video_cover").css(
                  "display",
                  "block"
                );
                $(".streamingdetail_cont_main_video_video_cover_btn").css(
                  "display",
                  "none"
                );
                $(".streamingdetail_cont_main_video_video_cover_cover").css(
                  "display",
                  "none"
                );
              } else {
                $(".streamingdetail_cont_main_video_video_cover").css(
                  "display",
                  "none"
                );
                $("#streamingdetail_cont_main_video_video")
                  .get(0)
                  .play();
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          // 加密完成
          this.$httphelper
            .post("/api/LmCourseApi/GetOnetoOnePlayList", {
              Sign: "string",
              OpenId: OpenId
            })
            .then(res => {
              this.isShowovo = !this.isShowovo;
              this.courmunulistovo = res.data.data;
              if (this.isShowovo == false) {
                this.courmunuovoactive = "";
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      }
    },

    // 点击1v1回放标题赋值视频链接
    playovoback(item, index) {
      this.courmunuovoactive = index;
      this.$httphelper
        .post("/api/LmCourseApi/GetLiveOneToOnePart", {
          Sign: "string",
          OpenId: item.OpenId
        })
        .then(res => {
          this.huifmenuTitle = item.Title;
          this.$refs.video.src = res.data.data.PlayBackPath;
          // 判断此视频是否有回放
          if (res.data.data.PlayBackPath == "") {
            this.$message({
              message: "此视频暂无回放",
              type: "warning"
            });
            $("#streamingdetail_cont_main_video_video")
              .get(0)
              .pause();
            $(".streamingdetail_cont_main_video_video_cover").css(
              "display",
              "block"
            );
            $(".streamingdetail_cont_main_video_video_cover_btn").css(
              "display",
              "none"
            );
            $(".streamingdetail_cont_main_video_video_cover_cover").css(
              "display",
              "none"
            );
          } else {
            $(".streamingdetail_cont_main_video_video_cover").css(
              "display",
              "none"
            );
            $("#streamingdetail_cont_main_video_video")
              .get(0)
              .play();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 点击按钮播放视频
    playervideo() {
      this.playback(false, this.huifmenuopenId, this.huifmenuoname);
    },

    // 直播回放目录
    gethuifmenu() {
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetPlayBackPageList", {
          Sign: "string",
          OpCourseId: this.$route.query.OpCourseId,
          OpAuthorId: localStorage.getItem("AuthorId")
        })
        .then(res => {
          this.courmunulistdetail = res.data.data;
          this.isIsApply = res.data.data.IsApply;
          this.courmunulist = res.data.data.playBackListResults;
          this.huifmenuopenId = this.courmunulist[0].OpenId;
          this.huifmenuoname = this.courmunulist[0].Title;
        })
        .catch(e => {
          console.log(e);
        });
    },

    // 预约下期直播课
    streamingcourse() {
      this.$router.push({
        path: "/streaming/streamingHome"
      });
    },

    // 跳转听课须知
    tomunotesappli() {
      this.$router.push({
        path: "/notesappli"
      });
    },

    // 点击报名须知弹框
    dialogtter() {
      this.dialogttercou = true;
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetCourseApplyOk", {
          Sign: "string",
          OpenId: this.$route.query.OpCourseId
        })
        .then(res => {
          this.Isgtter = res.data.data.Result;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取学历下拉
    getEducation() {
      this.$httphelper
        .post("/api/LmUserApi/GetDictValue", {
          TypeName: "Education"
        })
        .then(res => {
          this.optionsedu = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取职称下拉
    getJobTitle() {
      this.$httphelper
        .post("/api/LmUserApi/GetDictValue", {
          TypeName: "JobTitle"
        })
        .then(res => {
          this.optionsejob = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 立即报名
    baoming() {
      let userName = sessionStorage.getItem("userName");
      if (userName) {
        // 加密完成
        //  判断是否已经购买过此课程
        this.$httphelper
          .post("/api/LmCourseApi/GetIsApplyOk", {
            Sign: "string",
            AuthorId: localStorage.getItem("AuthorId"),
            ClassId: this.classId
          })
          .then(res => {
            if (res.data.data == true) {
              this.$message({
                message: "您已报名过此课程",
                type: "warning"
              });
              this.$router.push({
                path: "/personal/streamingytable"
              });
            } else {
              this.$httphelper
                .post("/api/LmUserApi/GetAuthorInfo", {
                  OpenId: localStorage.getItem("AuthorId")
                })
                .then(res => {
                  this.form.RealName = res.data.data.RealName;
                  this.form.Gender = res.data.data.Gender;
                  this.form.Birthday = res.data.data.Birthday;
                  this.form.Professional = res.data.data.Professional;
                  this.form.Education = res.data.data.Education;
                  this.form.JobTitle = res.data.data.JobTitle;
                  this.form.Job = res.data.data.Job;
                  this.form.SectionOffice = res.data.data.SectionOffice;
                  this.form.WorkUnit = res.data.data.WorkUnit;
                  this.form.Address = res.data.data.Address;
                  this.form.cell = res.data.data.Mobile;

                  if (res.data.data.Education == 0) {
                    this.form.Education = "";
                  } else {
                    this.form.Education = res.data.data.Education;
                  }
                  if (res.data.data.JobTitle == 0) {
                    this.form.JobTitle = "";
                  } else {
                    this.form.JobTitle = res.data.data.JobTitle;
                  }

                  if (
                    res.data.data.RealName == "" ||
                    res.data.data.Gender == "" ||
                    res.data.data.Birthday == "" ||
                    res.data.data.Education == "" ||
                    res.data.data.JobTitle == "" ||
                    res.data.data.SectionOffice == "" ||
                    res.data.data.WorkUnit == "" ||
                    res.data.data.Address == "" ||
                    res.data.data.Mobile == ""
                  ) {
                    this.dialogFormVisible = true;
                  } else {
                    this.$router.push({
                      path: "/streaming/streamingpay",
                      query: {
                        classId: this.classId,
                        courseId: this.courseId,
                        type: this.$route.query.type,
                        Hftype: this.$route.query.Hftype
                      }
                    });
                  }
                })
                .catch(err => {
                  console.log(err);
                });
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$confirm("请先登录", "提示", {
          customClass: "message-logout",
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            this.$router.push({
              path: "/login"
            });
          })
          .catch(e => {
            console.log(e);
          });
      }
    },

    // 获取课程详情
    getcoursedetail() {
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetCourseParticular", {
          OpenId: this.$route.query.OpCourseId
        })
        .then(res => {
          this.coursedetail = res.data.data;
          this.classId = this.coursedetail.OpClassId;
          this.courseId = this.coursedetail.OpCourId;
          this.coursedetail.Price = this.coursedetail.Price.toFixed(2);
          this.zheprice = (
            this.coursedetail.Price * this.coursedetail.DisCount
          ).toFixed(2);
          this.disCount = parseInt(this.coursedetail.DisCount * 10);

          // 报名截止日期
          var remindTime = this.coursedetail.EndApplyDate;
          // var remindTime = this.coursedetail.StartDate
          var str = remindTime.toString();
          str = str.replace("/-/g", "/");
          var finTime = new Date(str).getTime();

          // 当前时间
          let date = new Date();
          let datate = "";
          let y = date.getFullYear();
          let MM = date.getMonth() + 1;
          MM = MM < 10 ? "0" + MM : MM;
          let d = date.getDate();
          d = d < 10 ? "0" + d : d;
          let h = date.getHours();
          h = h < 10 ? "0" + h : h;
          let m = date.getMinutes();
          m = m < 10 ? "0" + m : m;
          let s = date.getSeconds();
          s = s < 10 ? "0" + s : s;
          datate = y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
          var strB = datate.toString();
          strB = strB.replace("/-/g", "/");
          var finTimeB = new Date(strB).getTime();

          if (finTimeB > finTime) {
            // 鼠标禁止点击事件
            $(".streamingdetail_cont_main_right_subpay").css({
              background: "#f4f4f4",
              color: "#999",
              cursor: "default",
              "pointer-events": "none"
            });
            $(".streamingdetail_cont_main_right_subpay span").html("报名截止");
            $(".streamingdetail_cont_main_left_cover_ifno p a").css({
              "pointer-events": "none",
              border: "none"
            });
            $(".streamingdetail_cont_main_left_cover_ifno p a").html(
              "报名截止"
            );
          }

          if (this.coursedetail.NumberPeople >= res.data.data.PerUpperlimit) {
            $(".streamingdetail_cont_main_right_subpay").css({
              background: "#f4f4f4",
              color: "#999",
              cursor: "default",
              "pointer-events": "none"
            });
            $(".streamingdetail_cont_main_right_subpay span").html("报名已满");
            $(".streamingdetail_cont_main_left_cover_ifno p a").css({
              "pointer-events": "none",
              border: "none"
            });
            $(".streamingdetail_cont_main_left_cover_ifno p a").html(
              "报名已满"
            );
          }

          // else if()
          // 课程概述
          this.$httphelper
            .post("/api/LmCourseApi/GetCourseGeneralize", {
              OpenId: this.coursedetail.OpClassId
            })
            .then(res => {
              this.coursedescribe = res.data.data;
              this.coursedescribetit = this.coursedescribe.Describe;
              this.coursedescribecont = this.coursedescribe.Experts;
              if (this.coursedescribecont.length < 4) {
                $(".swiper-button-next").css("display", "none");
                $(".swiper-button-prev").css("display", "none");
              } else {
                $(".swiper-button-next").css("display", "block");
                $(".swiper-button-prev").css("display", "block");
              }
            })
            .catch(e => {
              console.log(e);
            });
        })
        .catch(e => {
          console.log(e);
        });
    },

    getCoursemenu() {
      // 课程目录
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetCourseCatalogList", {
          OpenId: this.classId
        })
        .then(res => {
          this.muldescribecont = res.data.data;
        })
        .catch(e => {
          console.log(e);
        });
    },

    // 跳转专家详情
    tomrexpert(item) {
      this.$router.push({
        path: "/streaming/streamingexpert",
        query: {
          id: item.OpenId,
          courseId: this.courseId,
          type: this.$route.query.type,
          Hftype: this.$route.query.Hftype
        }
      });
    },

    // 根据id获取用户个人信息
    getIdInfo() {
      let userName = sessionStorage.getItem("userName");
      if (userName) {
        this.$httphelper
          .post("/api/LmUserApi/GetAuthorInfo", {
            OpenId: localStorage.getItem("AuthorId")
          })
          .then(res => {
            this.IsMember = res.data.data.IsMember;
            this.mobileB = res.data.data.Mobile;
            this.enddata = res.data.data.EndMemberDate;
            localStorage.setItem("Mobile", this.mobileB);
            localStorage.setItem("IsMember", this.IsMember);
            localStorage.setItem("EndMemberDate", this.enddata);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },

    // 绑定手机号提交按钮
    tosubmit() {
      if (this.form.cell == "") {
        this.$message({
          message: "请输入手机号",
          type: "warning"
        });
      } else {
        this.$httphelper
          .post("/api/LmUserApi/PhoneNumberBound", {
            AuthorId: localStorage.getItem("AuthorId"),
            PhoneNumber: this.form.cell
          })
          .then(res => {
            if (res.data.data == true) {
              this.$message({
                message: "绑定成功",
                type: "success"
              });
              this.$router.push({
                path: "/streaming/streamingpay",
                query: {
                  classId: this.classId,
                  courseId: this.courseId,
                  type: this.$route.query.type,
                  Hftype: this.$route.query.Hftype
                }
              });
            } else {
              this.$message({
                message: "绑定失败",
                type: "warning"
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },

    // 验证码
    gettime() {
      if (this.time == 0) {
        this.perdisabled = false;
        clearInterval(this.close);
        this.time = "获取验证码";
      } else {
        this.time--;
      }
    },

    // 获取验证码
    getCode() {
      this.perdisabled = true;
      // 加密完成
      if (this.form.cell == "") {
        this.$message({
          message: "请输入手机号",
          type: "warning"
        });
      } else {
        this.$httphelper
          .post("/api/LmUserApi/PhoneNumberExist", {
            Mobile: this.form.cell
          })
          .then(res => {
            if (res.data.data == true) {
              this.$message({
                message: "此手机号已存在，不允许绑定",
                type: "warning"
              });
            } else {
              this.$httphelper
                .post("/api/SmsEmailCodeApi/GetSmsCode", {
                  Mobile: this.form.cell
                })
                .then(res => {
                  if (res.data.data == true) {
                    this.time = 60;
                    this.close = setInterval(this.gettime, 1000);
                  } else {
                    this.$message({
                      message: "发送失败",
                      type: "warning"
                    });
                  }
                })
                .catch(err => {
                  console.log(err);
                });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  },
  components: {},

  created() {
    this.getcoursedetail();
    this.getIdInfo();

    this.gethuifmenu();

    this.getJobTitle();
    this.getEducation();

    if (this.$route.query.Hftype == 2) {
      this.playback(
        false,
        this.$route.query.OpenId,
        this.$route.query.title,
        this.$route.query.index
      );
    }
  },
  mounted() {
    // 判断视频播放是否结束并且判断是否是报名用户，反则报名观看全程
    if (!this.state) {
      document.getElementById(
        "streamingdetail_cont_main_video_video"
      ).loop = false; // 不设置视频循环播放
      document
        .getElementById("streamingdetail_cont_main_video_video")
        .addEventListener(
          "ended",
          () => {
            //该视频播放是否已结束
            this.state = true;
          },
          false
        );
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  width: 84% !important;
}
#streamingdetail {
  width: 100%;
  .streamingdetail_cont {
    width: 100%;
    height: 100%;
    .streamingdetail_cont_main {
      width: 100%;
      margin: 0 auto;
      position: relative;
      padding-bottom: 30px;
      height: auto;
      .streamingdetail_cont_main_left {
        width: 100%;
        height: 234px;
        position: relative;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
        .streamingdetail_cont_main_left_cover {
          width: 100%;
          height: 100%;
          background: rgba(21, 21, 27, 0.7);
          position: absolute;
          top: 0;
          left: 0;
          .streamingdetail_cont_main_left_cover_ifno {
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
            position: absolute;
            top: 42%;
            margin-top: -39px;
            p {
              text-align: center;
              color: #fff;
            }
            p:nth-child(1) {
              font-size: 20px;
            }
            p:nth-child(2) {
              font-size: 16px;
              margin-top: 14px;
              a {
                display: inline-block;
                color: #fff;
                font-size: 16px;
                border-bottom: 1px solid #fff;
                padding-bottom: 2px;
                margin-left: 25px;
              }
            }
          }
        }
      }
      .streamingdetail_cont_main_right {
        width: 94%;
        margin: 0 auto;
        margin-top: 15px;
        .streamingdetail_cont_main_right_tit {
          width: 100%;
          font-size: 22px;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          white-space: nowrap;
          a {
            color: #333;
            font-size: 22px;
          }
          span {
            font-size: 16px;
            color: #999;
            margin-left: 10px;
          }
        }
        .streamingdetail_cont_main_right_paycount {
          color: #999;
          font-size: 15px;
          margin-top: 10px;
          i {
            width: 1px;
            height: 10px;
            border-right: 1px solid #999;
            margin-left: 20px;
            margin-right: 20px;
          }
          span {
            background: #eee;
            border-radius: 9px;
            line-height: 16px;
            padding: 5px 6px;
            display: inline-block;
            font-size: 14px;
            line-height: 1;
            color: #777;
            transform: scale(0.82);
            margin-bottom: 6px;
          }
        }
        .streamingdetail_cont_main_right_date {
          border: 1px solid #e5e5e5;
          padding: 5px 15px 6px;
          position: relative;
          margin-top: 32px;
          height: auto;
          line-height: 42px;
          .hidden-clip {
            clip: inherit;
            top: -20px;
            font-size: 16px;
            background: #fff;
            line-height: 35px;
            padding: 0 5px;
            position: absolute;
          }
          p {
            color: #333;
            font-size: 15px;
          }
        }
        .streamingdetail_cont_main_right_price {
          width: 100%;
          margin-top: 18px;
          border: 1px solid #003c80;
          .streamingdetail_cont_main_right_price_top {
            background-color: #003c80;
            height: 40px;
            line-height: 40px;
            padding-left: 15px;
            span {
              font-size: 18px;
              color: #fff;
            }
          }
          .streamingdetail_cont_main_right_price_bottom {
            width: 100%;
            ul {
              width: 100%;
              li {
                list-style: none;
                padding: 10px 16px 10px 16px;
                span:nth-child(1) {
                  font-size: 23px;
                  color: #003c80;
                  position: relative;
                  top: 1px;
                  cursor: pointer;
                }
                span:nth-child(2) {
                  font-size: 16px;
                  color: #5d7283;
                  margin-left: 10px;
                  position: relative;
                  top: -1px;
                  cursor: pointer;
                  text-decoration: line-through;
                }
              }
            }
          }
        }
        .streamingdetail_cont_main_right_subpay {
          float: left;
          width: 28%;
          height: 40px;
          line-height: 40px;
          background: #003c80;
          color: #fff;
          font-size: 18px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
          span {
            display: block;
          }
        }
        .streamingdetail_cont_main_right_subpay:hover {
          background: #ff4343;
        }
        .streamingdetail_cont_main_right_zixu {
          width: 28%;
          height: 40px;
          line-height: 40px;
          border: 1px solid #003c80;
          color: #003c80;
          font-size: 18px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
          margin-left: 19px;
          float: left;
        }
        .streamingdetail_cont_main_right_zixuB {
          width: 28%;
          height: 41px;
          line-height: 41px;
          border: 1px solid #003c80;
          color: #003c80;
          font-size: 18px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
          margin-left: 25px;
          float: left;
          background-size: cover;
        }
        .streamingdetail_cont_main_right_zixuB:hover {
          span {
            font-weight: bold;
          }
        }
        .streamingdetail_cont_main_right_zixu_erweima {
          width: 187px;
          height: 103px;
          border: 1px solid #f4f4f4;
          float: right;
          margin-right: 16%;
          margin-top: 6px;
          background: #fff;
          img {
            width: 52%;
            display: inherit;
            height: 100%;
            margin: 0 auto;
            float: left;
          }
          span {
            float: right;
          }
          span:nth-child(2) {
            margin-top: 32px;
            margin-right: 13%;
          }
          span:nth-child(4) {
            margin-right: 6%;
            margin-top: 6px;
          }
        }
      }
    }

    .streamingdetail_contB {
      width: 100%;
      height: auto;
      padding-bottom: 0px;
      position: relative;
      .academicCont_crumbs {
        width: 1140px;
        height: 20px;
        margin: 0 auto;
        position: relative;
        margin-top: 28px;
        text-align: left;
        line-height: 20px;
        padding-left: 10px;
        span:nth-child(1) a {
          color: #000000;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
        }
        i {
          color: #767c82;
          font-size: 18px;
          margin-left: 10px;
          font-weight: bold;
        }
        span:nth-child(3) {
          color: #003c80;
          font-size: 16px;
          margin-left: 10px;
          font-weight: bold;
          cursor: pointer;
        }
      }
      .streamingdetail_cont_main {
        width: 100%;
        height: auto;
        margin: 0 auto;
        .streamingdetail_cont_main_video {
          width: 100%;
          height: auto;
          .streamingdetail_cont_main_video_video {
            width: 100%;
            height: auto;
            float: left;
            position: relative;
            border: 1px solid #e9e9e9;
            border-right: none;
            border-bottom: none;
            video {
              width: 100%;
              height: 100%;
            }
            .streamingdetail_cont_main_video_video_cover {
              .streamingdetail_cont_main_video_video_cover_cover {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.6);
                position: absolute;
                top: 0;
                left: 0;
              }
              .streamingdetail_cont_main_video_video_cover_img {
                width: 100%;
                height: 100%;
                background: url("../../../../static/zb/zjhb.png")
                  no-repeat;
                background-size: cover;
                position: absolute;
                top: 0;
                left: 0;
              }
              .streamingdetail_cont_main_video_video_cover_btn {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                color: #fff;
                text-align: center;
                line-height: 109px;
                background-color: #08cb6a;
                background-color: #23b8ff;
                position: absolute;
                z-index: 1;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                cursor: pointer;
                i {
                  margin-left: 6px;
                  font-size: 25px;
                  color: #fff;
                  position: relative;
                  top: -29px;
                  left: 0px;
                }
              }
              .streamingdetail_cont_main_video_video_cover_btn:hover {
                background-color: #12a7ff;
              }
            }
          }
          .streamingdetail_cont_main_video_menu {
            width: 100%;
            height: 100%;
            float: right;
            background: #131313;
            overflow: hidden;
            overflow-y: auto;
            .streamingdetail_cont_main_video_menu_one {
              padding: 8px;
              width: 100%;
              .courmunuactive {
                p {
                  span:nth-child(1) {
                    background: #23b8ff;
                    color: #333;
                  }
                  span:nth-child(2) {
                    color: #23b8ff !important;
                  }
                }
              }
              li:hover {
                p {
                  span:nth-child(1) {
                    background: #23b8ff;
                    color: #333;
                  }
                  span {
                    color: #23b8ff;
                  }
                }
              }
              li {
                list-style: none;
                width: 94%;
                margin: 0 auto;
                border-bottom: 1px solid #2a2a2a;
                padding: 15px 0;
                cursor: pointer;
                .streamingdetail_cont_main_video_menu_left {
                  display: inline-block;
                  width: 35px;
                  height: 20px;
                  background: #777777;
                  text-align: center;
                  line-height: 20px;
                  color: #333;
                  font-weight: bold;
                  border-radius: 3px;
                  font-size: 14px;
                }
                span:nth-child(2) {
                  float: right;
                  width: 85%;
                  color: #c7c7c7;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  white-space: nowrap;
                }
              }
            }
            .streamingdetail_cont_main_video_menu_two {
              padding: 8px;
              width: 76%;
              margin-left: 7%;
              margin-top: -15px;
              .courmunuovoactive {
                p {
                  span:nth-child(1) {
                    background: #23b8ff;
                    color: #333;
                  }
                  span:nth-child(2) {
                    color: #23b8ff !important;
                  }
                }
              }
              li:hover {
                p {
                  span:nth-child(1) {
                    background: #23b8ff;
                    color: #333;
                  }
                  span {
                    color: #23b8ff;
                  }
                }
              }
              li {
                list-style: none;
                width: 94%;
                margin: 0 auto;
                border-bottom: 1px solid #2a2a2a;
                padding: 15px 0;
                cursor: pointer;
                .streamingdetail_cont_main_video_menu_left {
                  display: inline-block;
                  width: 35px;
                  height: 20px;
                  background: #777777;
                  text-align: center;
                  line-height: 20px;
                  color: #333;
                  font-weight: bold;
                  border-radius: 3px;
                  font-size: 14px;
                }
                span:nth-child(2) {
                  float: right;
                  width: 78%;
                  color: #c7c7c7;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  white-space: nowrap;
                }
              }
            }
          }
        }
      }
    }

    .streamingdetail_cont_body {
      width: 100%;
      height: 100%;
      background: #f4f4f4;
      padding-bottom: 50px;
      .streamingdetail_cont_body_main {
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: relative;
      }
      .streamingdetail_cont_body_left {
        width: 100%;
        height: auto;
        background: #fff;
        float: left;
        padding: 0 20px 20px;
        margin-top: 20px;
        .streamingdetail_cont_body_left_tab {
          line-height: 55px;
          border-bottom: 1px solid #f6f6f6;
          ul {
            width: 100%;
            li:hover {
              a {
                color: #003c80;
              }
            }
            .stretab {
              a {
                color: #003c80;
              }
              border-bottom: 5px solid #003c80;
            }
            li {
              list-style: none;
              width: 80px;
              height: 45px;
              text-align: center;
              line-height: 45px;
              font-size: 16px;
              float: left;
              cursor: pointer;
              margin-right: 40px;
              a {
                display: inline-block;
                width: 100%;
                height: 100%;
                color: #333;
              }
            }
          }
        }
        .moexpert {
          width: 100%;
          ul {
            width: 100%;
            height: 100%;
            li {
              list-style: none;
              width: 50% !important;
              float: left;
              margin-right: 0 !important;
              height: 284px !important;
              border: none !important;
              padding: 15px 7px;
              margin-bottom: 12px;
              .moexpert_exrtpimg {
                width: 100%;
                height: 180px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              p:nth-child(2) {
                color: #003c80;
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                font-size: 18px;
                margin-top: 5px;
                a {
                  color: #003c80;
                }
              }
              p:nth-child(3) {
                text-align: justify;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                font-size: 14px;
                a {
                  color: #333;
                }
              }
            }
          }
        }
        .streamingdetail_cont_body_left_tab_cont {
          width: 100%;
          margin-top: 23px;
          .streamingdetail_cont_body_left_tab_cont_tet {
            font-size: 16px;
            line-height: 2;
            margin-bottom: 10px;
            color: #333;
            font-weight: bold;
          }
          .streamingdetail_cont_body_left_tab_cont_swiper:hover
            .swiper-button-next {
            display: block !important;
          }
          .streamingdetail_cont_body_left_tab_cont_swiper:hover
            .swiper-button-prev {
            display: block !important;
          }
          .streamingdetail_cont_body_left_tab_cont_swiper {
            width: 100%;
            height: 113px;
            .swiper-container {
              width: 100%;
              height: 100%;
            }
            .swiper-wrapper {
              padding-left: 30px;
              padding-right: 30px;
            }
            /deep/.swiper-slide {
              width: 300px !important;
              text-align: center;
              font-size: 18px;
              background: #fff;
              cursor: pointer;

              /* Center slide text vertically */
              display: -webkit-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              -webkit-justify-content: center;
              justify-content: center;
              -webkit-box-align: center;
              -ms-flex-align: center;
              -webkit-align-items: center;
              align-items: center;
            }
            .swiper-button-next,
            .swiper-button-prev {
              display: none !important;
              z-index: 1;
              position: absolute;
              top: 59%;
              transform: translateY(-50%);
              display: block;
              width: 25px;
              height: 50px;
              background-color: #000;
              color: #fff;
              opacity: 0.4;
              border-radius: 25px 0 0 25px;
              right: 0;
              background-image: none;
              i {
                line-height: 52px;
                font-size: 21px;
                position: relative;
                left: 6px;
              }
            }
            .swiper-button-prev {
              left: 0;
              border-radius: 0px 25px 25px 0px;
              i {
                left: 0;
              }
            }
            .streamingdetail_cont_body_left_tab_cont_swiper_info {
              width: 300px;
              height: 97px;
              .streamingdetail_cont_body_left_tab_cont_swiper_info_img {
                width: 96px;
                height: 96px;
                border-radius: 50%;
                float: left;
                margin-right: 20px;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .streamingdetail_cont_body_left_tab_cont_swiper_info_cont {
                float: right;
                width: 181px;
                height: 100%;
                p:nth-child(1) {
                  color: #003c80;
                  text-align: left;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  /* autoprefixer: off */
                  -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  font-size: 18px;
                  a {
                    color: #003c80;
                  }
                }
                p:nth-child(2) {
                  text-align: justify;
                  color: #333;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 3;
                  line-clamp: 3;
                  /* autoprefixer: off */
                  -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  font-size: 14px;
                  a {
                    color: #333;
                  }
                }
              }
            }
          }
          .streamingdetail_cont_body_left_tab_cont_info {
            margin-top: 28px;
            p:nth-child(1) {
              font-size: 16px;
              color: #000;
              line-height: 26px;
              font-weight: bold;
            }
            p:nth-child(2) {
              width: 100%;
              color: #333;
              font-size: 15px;
              line-height: 26px;
              margin-top: 17px;
            }
          }
        }
        .streamingdetail_cont_body_left_tab_contB {
          width: 100%;
          margin-top: 20px;
          ul {
            li {
              width: 100%;
              height: auto;
              list-style: none;
              margin-bottom: 10px;
              .streamingdetail_cont_body_left_tab_contB_top {
                width: 100%;
                height: 45px;
                line-height: 45px;
                span:nth-child(1) {
                  width: 42px;
                  text-align: left;
                  font-size: 20px;
                  color: #000;
                  font-weight: 700;
                  float: left;
                  margin-left: 15px;
                }
                span:nth-child(2) {
                  font-size: 16px;
                  color: #000;
                  font-weight: 700;
                }
              }
              .streamingdetail_cont_body_left_tab_contB_bottom {
                width: 100%;
                height: auto;
                background: #f4f4f4;
                cursor: pointer;
                position: relative;
                i {
                  font-size: 27px;
                  position: absolute;
                  left: 0;
                  top: 7px;
                  width: 53px;
                  text-align: center;
                  color: #a3d2f8;
                }
                p {
                  font-size: 16px;
                  color: #333;
                  line-height: 50px;
                  margin-left: 18%;
                  font-weight: bold;
                  span:nth-child(2) {
                    color: #999;
                    margin-left: 10px;
                  }
                }
              }
              .streamingdetail_cont_body_left_tab_contB_bottom:hover {
                background: #eeeeee;
                i {
                  color: #003c80;
                }
              }
            }
          }
        }
      }
    }
  }
  .regisCon_div {
    display: inline-block;
    width: 42%;
    height: 32px;
    border: 1px solid #cbcbcb;
    margin-bottom: 19px;
    border-radius: 5px;
    position: relative;
    margin-left: 6%;
    i {
      color: #cbcbcb;
      position: relative;
      top: 5px;
      left: 9px;
    }
    .el-form-item {
      position: relative;
      width: 100%;
      height: 32px !important;
      /deep/.el-input__inner {
        border: none;
        position: relative;
        top: -2px;
        height: 30px;
      }
    }
    .regis_hq {
      width: 88px;
      height: 31px;
      background: #003c80;
      text-align: center;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      position: absolute;
      right: -2px;
      top: 0;
      border-radius: 0 5px 5px 0;
      padding: 8px 3px;
    }
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #efefef !important;
  }
  .dialogttercoubaoming {
    /deep/.el-dialog__headerbtn {
      display: none;
    }
    /deep/.el-dialog {
      width: 46%;
      margin-top: 8vh !important;
    }
    /deep/.el-col-12 {
      width: 100%;
    }
    /deep/.el-form-item__label {
      font-size: 15px;
    }
    /deep/.el-dialog__title {
      text-align: center;
      margin-left: 42%;
      font-size: 25px;
      font-weight: bold;
    }
    /deep/.el-input {
      width: 80%;
    }
    /deep/.el-dialog__body {
      width: 85%;
      margin: 0 auto;
    }
    /deep/.el-select {
      width: 83%;
      /deep/.el-input {
        width: 96%;
      }
    }
  }
  .dialogttercou {
    /deep/.el-dialog {
      width: 50%;
    }
    /deep/.el-dialog__title {
      text-align: center;
      margin-left: 43%;
      font-size: 25px;
      font-weight: bold;
    }
    p {
      font-size: 18px;
      line-height: 37px;
      text-align: justify;
      margin-bottom: 10px;
      color: #000;
    }
    p:nth-child(1) {
      span {
        font-weight: bold;
      }
    }
    div {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      img {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 16px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
</style>
<style>
.message-logout {
  width: 80% !important;
}
</style>